<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :columns="columns"
      :operation-items="operationItems"
      :operation-Width="200"
      :render-form-title="renderFormTitle"
      :data-grid-title="dataGridTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-page-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <el-descriptions :column="2" border>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">数据库类型</div>
            </template>
            <div>
              <el-form-item
                prop="databaseTypeCode"
                :rules="[
                  {
                    required: true,
                    message: '数据库类型不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <dict-selector v-model="formData.databaseTypeCode" dict-code="DATABASE_TYPE" placeholder="请填数据库类型..."></dict-selector>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px">
            <template #label>
              <div>模板名称</div>
            </template>
            <div>
              <el-form-item
                prop="templateName"
                :rules="[
                  {
                    required: true,
                    message: '模板名称不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.templateName" placeholder="请输入模板名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px">
            <template #label>
              <div>作用效果</div>
            </template>
            <div>
              <el-form-item prop="effect">
                <el-input v-model="formData.effect" placeholder="请输入..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>SQL代码模板</div>
            </template>
            <div>
              <el-form-item prop="content">
                <basic-editor ref="contentRef" v-model="formData.content" style="height: 500px"></basic-editor>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type {
  IColumn,
  IDelInfoHttpConfig,
  IDelListHttpConfig,
  IGetPageHttpConfig,
  IUpdateInfoHttpConfig,
  IAddInfoHttpConfig,
  IHttpConfig,
  IOperationItem,
  IGetInfoHttpConfig,
} from '@/types/menu-datagrid-form';
import BasicEditor from '@/components/code-editor/basic-editor/index.vue';
import type { ISqlTemplate } from './sql-template';

defineOptions({
  name: 'SqlTemplate',
});
const formData = ref<ISqlTemplate>({
  id: '',
  databaseTypeCode: '', //数据库类型编码
  templateName: '', //模板名称
  effect: '', //作用效果：如 create|alter
  content: '', //模板内容
});

const dataGridTitle = 'SQL代码模板列表';
const operationItems = ref<IOperationItem<ISqlTemplate>[]>([
  {
    code: 'edit',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
  {
    code: 'delInfo',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
]);

const renderFormTitle = (stateValue: 'add' | 'edit', data: ISqlTemplate): string => {
  if (stateValue === 'add') {
    return 'SQL代码模板配置';
  } else {
    return data.templateName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'databaseTypeName',
    label: '数据库类型',
    align: 'left',
    width: 200,
  },
  {
    prop: 'templateName',
    label: '模板名称',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/modeling/sql/template/#{id}',
  delInfoMsgEmphasize: '#{templateName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/modeling/sql/template/list',
};

const getPageHttpConfig: IGetPageHttpConfig<ISqlTemplate> = {
  url: '/admin-api/modeling/sql/template/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<ISqlTemplate> = {
  url: '/admin-api/modeling/sql/template/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<ISqlTemplate> = {
  url: '/admin-api/modeling/sql/template',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<ISqlTemplate> = {
  url: '/admin-api/modeling/sql/template',
};
</script>
